<template>
	<div class="login-page">
        <i></i>
		<el-form :model="form" ref="registerForm" label-width="80px">
			<el-form-item label="用户名">
				<el-input v-model="form.username" placeholder="请输入用户名"></el-input>
			</el-form-item>
			<el-form-item label="密码">
				<el-input type="password" v-model="form.password" placeholder="请输入密码"></el-input>
			</el-form-item>
            <el-form-item label="确认密码">
                <el-input type="password" v-model="form.rePassword" placeholder="请确认密码"></el-input>
            </el-form-item>
            <el-form-item>
				<el-button type="primary" @click="handleRegister">注册</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script lang="ts" setup>
import { reactive, ref } from "vue";
import { useRoute } from "vue-router";
import { postUrl } from "@/utils/service";

const router = useRoute();

const registerForm = ref(null)
const form = reactive({
	username: '',
	password: '',
    rePassword: ''
})

const handleRegister = async() => {
	console.log('register')
    // router.push('/register');
	const res = await postUrl('http://localhost:5000/register', {...form})
	console.log(res)
}

</script>

<style lang="less" scoped>
.login-page {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 600px;
	height: 600px;
	background: #fff;
	color: #181818;
	border-radius: 4px;
	margin: 80px auto;
}
</style>